<div>

    <div class="row-fluid">
    <div class="recipe-search-control" ng-controller="RecipeSearchController">
      <form class="form-inline">
        <div class="dropdown">
          <div class="input-append">
            <span class="input-med uneditable-input">{{recipe.cls | translate}}</span>

            <div class="btn-group">
              <button class="btn dropdown-toggle"><span class="caret"></span></button>
              <ul class="dropdown-menu pull-right">
                <li ng-repeat="cls in allClasses"><a ng-click="recipe.cls=cls">{{cls | translate}}</a></li>
              </ul>
            </div>
          </div>
        </div>

        <div class="my-dropdown" id="recipe-menu-root" >
          <div class="input-append">
            <span class="span4 uneditable-input my-dropdown-toggle">{{recipe.name}}</span>

            <div class="btn-group">
              <button class="btn my-dropdown-toggle"><span class="caret"></span></button>
            </div>
          </div>
          <div class="my-dropdown-menu">
            <input class="input-medium search my-dropdown-focus" type="text" name="name"
                   ng-model="recipeSearch.text"
                   placeholder="{{ 'RECIPE_SEARCH' | translate }}" select-on-focus stop-click-propogation
                   ng-keypress="onSearchKeyPress($event)" ng-keydown="onSearchKeyDown($event)"
                   id="recipe-search-text"/>
            <ul class="recipe-menu-scrollable" isolate-scrolling>
              <li class="loading" ng-show="recipeSearch.loading"><i class="fa fa-spinner fa-spin"></i> {{'LOADING' | translate}}
              </li>
              <li ng-hide="recipeSearch.loading"
                  ng-repeat="r in recipeSearch.list | orderBy:recipeSearch.order"
                  ng-class="{active: $index === recipeSearch.selected}"
                  id="recipeSearchElement{{$index}}"
                  ng-mouseover="recipeSearch.selected=$index"
                  ng-click="recipeSelected(r.name)">
                <a ng-click="recipeSelected(r.name)">[{{r.baseLevel}}{{'*'.repeat(r.stars)}}] {{r.name}}</a>
              </li>
            </ul>
          </div>
        </div>
      </form>
    </div>	
        <simulator-status class="solver-status" crafter="crafter.stats[recipe.cls]" bonus-stats="bonusStats"
                          recipe="recipe"
                          status="pageState.solverStatus"
                          valid="isValidSequence(pageState.solverStatus.sequence, recipe.cls)"></simulator-status>
    </div>
    <div class="row-fluid">
        <h5>{{ 'INITIAL_GUESS' | translate }}</h5>
        <action-sequence cls="recipe.cls" actions="sequence"
                         action-classes="sequenceActionClasses"
                         tooltip-placement="right"></action-sequence>
    </div>
    <div class="row-fluid">
        <div class="control-group">
            <button class="btn btn-primary" ng-click="startSolver()"
                    ng-show="!pageState.solverStatus.state && !pageState.solverStatus.running"
                    ng-disabled="!allForms.$valid || !isValidSequence(sequence, recipe.cls)">{{ 'SOLVER_START' | translate }}
            </button>
            <button class="btn btn-primary" ng-click="stopSolver()" ng-show="pageState.solverStatus.running">{{'SOLVER_STOP' | translate}}
            </button>
            <button class="btn btn-primary" ng-click="resumeSolver()"
                    ng-show="pageState.solverStatus.state && !pageState.solverStatus.running"
                    ng-disabled="!allForms.$valid || !pageState.solverStatus.state || !isValidSequence(pageState.solverStatus.sequence, recipe.cls) || pageState.solverStatus.error">
                {{ 'SOLVER_CONTINUE' | translate }}
            </button>
            <button class="btn btn-danger" ng-click="resetSolver()"
                    ng-disabled="pageState.solverStatus.running || !pageState.solverStatus.state">{{ 'SOLVER_RESET' | translate }}
            </button>
            <button class="btn btn-warning"
                    ng-disabled="pageState.solverStatus.running || !pageState.solverStatus.sequence || pageState.solverStatus.sequence.length === 0 || equivalentSequence()"
                    ng-click="useSolverResult()">{{ 'SOLVER_EDIT_SIMULATOR' | translate }}
            </button>
            <button class="btn" ng-click="showOptionsModal()">{{ 'OPTIONS' | translate }}</button>
        </div>
    </div>
    <div class="row-fluid">
        <div ng-show="pageState.solverStatus.running">
            <h5>{{ 'WORKING_IN_PROGRESS' | translate }}</h5>
            <div class="sequence well well-small">
                <progressbar class="progress-striped active"
                             animate="false"
                             value="pageState.solverStatus.generationsCompleted/pageState.solverStatus.maxGenerations*100">
                    {{pageState.solverStatus.generationsCompleted}}/{{pageState.solverStatus.maxGenerations}}
                </progressbar>
            </div>
        </div>
        <div ng-show="!pageState.solverStatus.running || !equivalentSequence()">
            <h5>{{ 'SOLVER_RESULT' | translate }}
                <small ng-show="equivalentSequence()">{{ 'NO_CHANGE' | translate }}</small>
            </h5>
            <div ng-class="{'disabled-action-list': equivalentSequence()}">
                <action-sequence cls="recipe.cls" actions="pageState.solverStatus.sequence"
                                 action-classes="sequenceActionClasses" tooltip-placement="right"></action-sequence>
            </div>
        </div>
    </div>
    <div class="row-fluid">
        <tabset>
            <tab heading="{{ 'PROBABILISTIC_SIM' | translate }}" active="logTabs.ga.active">
                <pre>{{pageState.solverStatus.logs.ga}}</pre>
            </tab>
            <tab active="logTabs.mc.active">
                <tab-heading>{{ 'MONTE_CARLO_SIM' | translate}} &nbsp; <i class="fa fa-refresh flat-button"
                                                                          ng-click="runMonteCarloSim(pageState.solverStatus.sequence)"></i>
                </tab-heading>
                <pre>{{pageState.solverStatus.logs.mc}}</pre>
            </tab>
            <tab active="logTabs.macro.active">
                <tab-heading>{{ 'MACRO' | translate }}</tab-heading>
                <macros sequence="pageState.solverStatus.sequence" cls="recipe.cls" options="macroOptions"></macros>
            </tab>
            <tab heading="{{ 'EXECUTION_LOG' | translate}}" active="logTabs.execution.active">
                <pre>{{pageState.solverStatus.logs.execution}}</pre>
            </tab>
        </tabset>
    </div>

</div>
